<template>
    <div class="ques-item box-border white">
      <el-row>
        <el-col :span="18" align="left">
          {{data.title?data.title:'暂无'}}
        </el-col>
        <el-col :span="6" align="right">
          <i class="icon el-icon-delete" @click="deleteQues" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" align="left">
          共{{count}}道题,共{{scoreSum}}分
        </el-col>
        <el-col :span="6" align="right">
          <i class="icon el-icon-top" @click="upQues" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" align="left">
          每题<el-input v-model="data.perScore" style="width: 60px" size="mini" />分
        </el-col>
        <el-col :span="6" align="right">
          <i class="icon el-icon-bottom" @click="downQues"/>
        </el-col>
      </el-row>
      <el-divider />
    </div>
</template>

<script>
import __ from 'lodash'
export default {
  props: {
    data: Object,
    index: Number
  },
  computed: {
    count () {
      return this.data.simpleCount + this.data.normalCount + this.data.complexCount
    },
    scoreSum () {
      let perScore = this.data.perScore
      if (__.isEmpty(this.data.perScore)) {
        perScore = 0
      }
      return this.count * parseInt(perScore)
    }
  },
  methods: {
    deleteQues () {
      this.$bus.$emit('op-del-ques', this.index)
    },
    upQues () {
      this.$bus.$emit('op-up-ques', this.index)
    },
    downQues () {
      this.$bus.$emit('op-down-ques', this.index)
    }
  }
}
</script>

<style scoped lang="less">
  @import url(../../../assets/css/common.less);
  .ques-item {
    position: relative;
    &:hover {
      .shadow-tint;
      z-index:100;
    }
    width: 250px;
    .el-row {
      padding: 5px 20px;
    }
    .el-divider {
      padding: 0;
      margin: 0;
    }
    .icon{
      &:hover{
        color: #409EFF;
      }
      &:active {
        color: #67C23A;
      }
    }
  }
</style>
